<template>
	<view class="passenger">
		<view class="header">
			<view class="avatar">
				<image src="../../static/八维票务小程序 UI 切图/PNG/2x/Icon/User 36.png" mode=""></image>
				<text>13582208538</text>
			</view>

			<view class="change_user">
				<text>切换账号</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>

		<view class="main">
			<view class="btn">
				<view class="asd">
					<u-icon name="plus-circle" size="30" color="#1BA9BA"></u-icon>
					<text>添加乘客</text>
				</view>

				<view class="userList">
					<view class="title">
						下拉可刷新乘客列表
					</view>

					<view class="list">

					</view>
				</view>
			</view>
		</view>

		<view class="footer">

		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'

	const userList = reactive([{
		name: '小闫',
		id_card: '130634200202172110',
		is_checked: false,
		ticket_type: 1,
		phone_number: '13582208538'
	}])
</script>

<style lang="scss">
	page,
	.passenger {
		width: 100%;
		height: 100%;

		.header {
			width: 100%;
			height: 80px;
			background-color: #1BA9BA;
			display: flex;
			align-items: center;
			color: white;

			.avatar {
				width: 60%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				font-size: 20px;

				image {
					width: 50px;
					height: 50px;
				}
			}

			.change_user {
				width: 40%;
				display: flex;
				justify-content: flex-end;
				padding-right: 20rpx;
			}
		}

		.main {
			width: 100%;

			.btn {
				width: 95%;
				height: 50px;
				border-radius: 10rpx;
				margin: 20rpx auto;
				box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
				display: flex;
				align-items: center;

				.asd {
					display: flex;
					align-items: center;
					margin: 0 auto;
					color: #1BA9BA;
				}
			}

			.userList {}
		}
	}
</style>